<template>
  <div>
    <header-menu :index="$route.path"></header-menu>
    <swiper :imglist="imglist" :isShow="false" />
    <div class="container">
      <phone-item
        v-for="(item, index) in phoneList"
        :phoneItem="phoneList[index]"
        :key="index"
      />
    </div>
    <div class="pages">
      <el-pagination
        layout="prev, pager, next"
        :total="30"
        @current-change="changeItem"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import headerMenu from "../components/Header.vue";
import swiper from "../components/swiper.vue";
import phoneItem from "../components/phoneItem.vue";
export default {
  data() {
    return {
      imglist: {},
      phoneItem: {},
      phoneList: {},
    };
  },
  components: {
    headerMenu,
    swiper,
    phoneItem,
  },
  created() {
    // console.log(this.$router.path);
  },
  mounted() {
    this.$http.get("/v1/home/banner").then((res) => {
      // console.log(res.data);
      this.imglist = res.data;
    });
    this.$http.get("/v1/home/phoneList").then((res) => {
      this.phoneItem = res.data[0];
      this.phoneList = res.data;
      // console.log(this.phoneItem);
    });
  },
  methods: {
    changeItem(page) {
      this.$http.get(`/v1/home/phoneList?page=${page}`).then((res) => {
        this.phoneList = res.data;
      });
    },
  },
};
</script>
<style  lang='less' scoped>
.container {
  text-align: center;
}
.pages {
  text-align: center;
}
.el-pager /deep/ li {
  font-size: 20px;
}
</style>